import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
import styles from './index.module.less';
import { Modal } from 'antd-mobile-v2';

interface Props {
  requestNotice: Function;
  visibleCallback: (visible) => void;
}
interface NoticeItem {
  content: string;
  id: string;
}

const Notice: React.FC<Props> = (props) => {
  const { requestNotice } = props;
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [noticeList, setNoticeList] = useState<NoticeItem[]>([]);

  useEffect(() => {
    getNotice();
  }, []);

  const getNotice = async () => {
    setLoading(true);
    try {
      const res = await requestNotice();

      if (res.status === 200) {
        setNoticeList(res.data);
      }
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

  const handleToggle = () => {
    props.visibleCallback && props.visibleCallback(!visible);
    setVisible(!visible);
  };

  return (
    <div
      className={classnames(
        styles.container,
        !noticeList.length ? styles.hide : ''
      )}
    >
      <div className={styles.content} onClick={handleToggle}>
        <img
          className={styles.left}
          src={require('@/assets/images/icon-notice.png')}
        />
        <span className={styles.right}>{noticeList[0]?.content}</span>
        <i className={classnames('iconfont', 'iconnext', styles['icon'])}></i>
      </div>
      <Modal
        transparent
        visible={visible}
        maskClosable={false}
        className={styles.modal}
        onClose={handleToggle}
        title='公告'
      >
        <div className={styles.modal}>
          <div className={styles.modalContent}>{noticeList[0]?.content}</div>
          <div className={styles.close} onClick={handleToggle}>
            关闭
          </div>
        </div>
      </Modal>

      {/* <div
        className={classnames(styles.modalWrap, !visible ? styles.hide : '')}
        onClick={e => e.stopPropagation()}
      >
        <div className={styles.modal}>
          <div className={styles.title}>公告</div>
          <div className={styles.modalContent}>{noticeList[0]?.content}</div>
          <div className={styles.close} onClick={handleToggle}>
            关闭
          </div>
        </div>
      </div> */}
    </div>
  );
};

export default Notice;
